<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!-- My Tweaking START -->
		<script async type='text/javascript'>
			/* <!-- [CDATA[ */
			/* ##### Event ##### */
			var PLAYGROUND = (function(me) {
				if (window.addEventListener) {
					me.addEvent = function(element, event, fn) {
						element.addEventListener(event, fn, false);
					};
				} else {
					me.addEvent = function(element, event, fn) {
						element.attachEvent('on' + event, fn);
					};
				}

				/* Main function. This function is invoked when document.body is ready, so override this between <body> and </body>). */
				me.main = function() {
				};

				me.play = function() {
					/* Ensure that init() be executed when document.doby is ready; PLAYGROUND.main() should be already overridden at that time. */
					if (document.body) {
						init();
					} else {
						me.addEvent(window, "load", init);
					}

					var elem = document.createElement("script");
					function init() {
						elem.async = "true";
						elem.src = "//contender-x-blogger.googlecode.com/git/js/playground-init.js";
						me.addEvent(elem, "load", function() {
							document.body.removeChild(elem);
						});
						document.body.appendChild(elem);
					}

				};

				return me;
			} )(PLAYGROUND || {});

			PLAYGROUND.play();
			/* ]]--> */
		</script>
		<!-- My Tweaking END -->

		<style>
			/* My Tweaking Start*/
			.post-header {
				margin: 0em 0 1em;
				border-bottom: 1px dashed hsl(0, 0%, 80%);
			}
			.post-body img {
				border: none 0px hsl(0, 0%, 80%);
			}
			.post-body code {
				border: solid 1px hsl(0, 0%, 80%);
				border-radius: 4px;
				padding: 0.1em 0.1em 0.1em 0.1em;
			}
			.post-body .caution, .post-body .warning {
				background-color: hsl(0, 100%, 94%);
				padding: 6px 8px 6px 10px;
				border-left: 6px solid hsl(0, 100%, 33%);
			}
			.post-body .note, .post-body .special {
				background-color: hsl(108, 100%, 94%);
				padding: 6px 8px 6px 10px;
				border-left: 6px solid hsl(108, 100%, 33%);
			}
			.post-body .syntaxhighlighter {
				padding: 0.6em 0;
				border-radius: 4px;
			}
			.post-body .syntaxhighlighter .line {
				white-space: pre-wrap !important; /* make code wrap */
			}
			.jump-link {
				text-align: center;
			}
			.post-footer {
				margin: 1.5em 0 0;
				border-top: 1px dashed hsl(0, 0%, 80%);
			}
			/* HTTP Status Response Page */
			.status-msg-wrap, .status-msg-border, .status-msg-bg, .status-msg-body {
				opacity: 1;
				position: static;
				padding: 0;
				z-index: 0;
			}
			.status-msg-body h1 {
				font-size: 1.4em;
			}
			#placeholder-404 {
				position: relative;
				font: 60% Times;
				color: black;
			}
			#placeholder-404 .anim {
				/*border: 1px solid red;*/
				background-color: hsl(0, 0%, 75%);
				border-left: 1px solid black;
				border-right: 1px solid black;
				overflow: hidden;
				cursor: default;
				display: inline-block;
				vertical-align: middle;
				height: inherit;
				z-index: 0;
			}
			#placeholder-404 .clicktrap {
				cursor: default;
				position: relative;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			#placeholder-404 .center-hack {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				/* background: hsl(0, 0%, 50%); */
			}
			#placeholder-404 .center-hack:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
				margin: 0;
				padding: 0;
				/* background: red; */
				/* width: 20px; */
			}
			#placeholder-404 .info {
				border: 3px double black;
				border-radius: 8px;
				text-align: center;
				background-color: hsl(0, 0%, 90%);
				font-size: 2.4em;
				display: inline-block;
				position: relative;
				vertical-align: middle;
				margin: 0;
				padding: 0.2em;
				z-index: 2;
			}
			#placeholder-404 .info * {
				margin: 0;
				padding: 0;
			}
			/* My Tweaking End */
		</style>
	</head>
	<body>
		The beginning of my post.
		<br />
		<!--more--><!-- My Contents START -->
		<br />
		<div id="placeholder-404" style="text-align: center;"></div>
		<br />
		<div id="placeholder-404-panel" style="text-align: center;"><progress id="progress">Loading...</progress></div>
		<script type="text/javascript">
			// <!-- [CDATA[
			//A bouncy ASCIIfied ball

			// Three.js and AsciiEffect
			PLAYGROUND.main = function() {
				var urls = ['http://threejs.org/build/three.min.js'];
				$.when.apply(null, urls.map($.getScript)).fail(function() {
					console.debug('error: failed to load Three.js');
				}).then(function() {
					// console.log('debug: Three.js loaded');
					urls = ['//contender-x-blogger.googlecode.com/git/js/Detector.js', '//contender-x-blogger.googlecode.com/git/js/Stats.js', '//contender-x-blogger.googlecode.com/git/js/spectrum/spectrum.min.js'];
					$.when.apply(null, urls.map($.getScript)).fail(function() {
						console.debug('error: failed to load required modules for AsciiEffect.js');
					}).then(function() {
						// console.log('debug: required modules for AsciiEffect.js loaded');
						$.getScript('//contender-x-blogger.googlecode.com/git/js/AsciiEffect.js').fail(function() {
							console.debug('error: failed to load AsciiEffect.js');
						}).then(function() {
							// console.log('debug: AsciiEffect.js loaded');
							run();
						});
					});
				});

				var run = function() {
					var progress = document.getElementById("progress");
					progress.parentElement.removeChild(progress);
					
					var container, stats;
					var camera, scene, renderer, effect;
					var sphere_r;
					var sphere, plane;
					var anim_w_percent;
					var anim_h_percent;
					var width;
					var height;

					var ascii_bright_pattern = /* ' CGO08@' */' .,:;=|iI+hHOE#`$';
					var start = Date.now();

					// AsciiEffect parameters
					var b_color = false/* true: slow */;
					var b_alpha = false/* true: very slow */;
					var b_block = true/* true: fast */;
					var b_invert = false;
					var i_scale = 1;
					var s_resolution = 'low';
					var s_render_style = 'canvas';
					var s_font_color = 'black';
					var s_bg_color = 'hsl(0, 0%, 70%)';

					// Insert parameter panel
					{
						var appendWithLabel = function(container, label, elem) {
							var label_elem = document.createElement("label");
							label_elem.innerHTML = label;
							container.appendChild(label_elem);
							container.appendChild(document.createTextNode('\u00A0'));
							container.appendChild(elem);
						};
						var panel = document.getElementById('placeholder-404-panel');

						var input_render_style = document.createElement('select');
						input_render_style.id = 'render_style';
						input_render_style.onchange = function() {
							effect.setup({
								renderStyle : input_render_style.value
							});
						}; {
							var opt_textual = document.createElement('option');
							opt_textual.value = 'textual';
							if (opt_textual.value == s_render_style)
								opt_textual.selected = "selected";
							opt_textual.innerHTML = 'Textual';
							input_render_style.appendChild(opt_textual);
							var opt_canvas = document.createElement('option');
							opt_canvas.value = 'canvas';
							if (opt_canvas.value == s_render_style)
								opt_canvas.selected = "selected";
							opt_canvas.innerHTML = 'Canvas/WebGL';
							input_render_style.appendChild(opt_canvas);

							var opt_no_effect = document.createElement('option');
							opt_no_effect.value = 'no_effect';
							if (opt_no_effect.value == s_render_style)
								opt_no_effect.selected = "selected";
							opt_no_effect.innerHTML = 'No Effect';
							input_render_style.appendChild(opt_no_effect);
						}
						appendWithLabel(panel, 'Render Style', input_render_style);
						panel.appendChild(document.createElement('br'));

						var input_color = document.createElement('input');
						input_color.type = 'checkbox';
						input_color.id = 'color';
						input_color.onchange = function() {
							effect.setup({
								color : input_color.checked
							});
						};
						input_color.checked = b_color;
						appendWithLabel(panel, 'Color', input_color);
						panel.appendChild(document.createTextNode('\u00A0\u00A0\u00A0'));
						var input_alpha = document.createElement('input');
						input_alpha.type = 'checkbox';
						input_alpha.id = 'alpha';
						input_alpha.onchange = function() {
							effect.setup({
								alpha : input_alpha.checked
							});
						};
						input_alpha.checked = b_alpha;
						appendWithLabel(panel, 'Alpha', input_alpha);
						panel.appendChild(document.createTextNode('\u00A0\u00A0\u00A0'));
						var input_block = document.createElement('input');
						input_block.type = 'checkbox';
						input_block.id = 'block';
						input_block.onchange = function() {
							effect.setup({
								block : input_block.checked
							});
						};
						input_block.checked = b_block;
						appendWithLabel(panel, 'Block', input_block);
						panel.appendChild(document.createTextNode('\u00A0\u00A0\u00A0'));
						var input_invert = document.createElement('input');
						input_invert.type = 'checkbox';
						input_invert.id = 'invert';
						input_invert.onchange = function() {
							effect.setup({
								invert : input_invert.checked
							});
						};
						input_invert.checked = b_invert;
						appendWithLabel(panel, 'Invert', input_invert);
						panel.appendChild(document.createElement('br'));

						// var input_scale = document.createElement('select');
						// input_scale.id = 'scale';
						// input_scale.onchange = function() {
						// effect.setup({
						// scale : parseInt(input_scale.value)
						// });
						// };
						// for (var cur_scale = 1; cur_scale <= 5; ++cur_scale) {
						// var opt = document.createElement('option');
						// opt.value = cur_scale;
						// if (cur_scale == i_scale)
						// opt.selected = "selected";
						// opt.innerHTML = cur_scale;
						// input_scale.appendChild(opt);
						// }
						// appendWithLabel(panel, 'Scale', input_scale);
						// panel.appendChild(document.createTextNode('\u00A0\u00A0'));
						//
						// var input_resolution = document.createElement('select');
						// input_resolution.id = 'resolution';
						// input_resolution.onchange = function() {
						// effect.setup({
						// strResolution : input_resolution.value
						// });
						// };
						// {
						// var opt_low = document.createElement('option');
						// opt_low.value = 'low';
						// if (opt_low.value == s_resolution)
						// opt_low.selected = "selected";
						// opt_low.innerHTML = 'Low';
						// input_resolution.appendChild(opt_low);
						// var opt_medium = document.createElement('option');
						// opt_medium.value = 'medium';
						// if (opt_medium.value == s_resolution)
						// opt_medium.selected = "selected";
						// opt_medium.innerHTML = 'Medium';
						// input_resolution.appendChild(opt_medium);
						// var opt_high = document.createElement('option');
						// opt_high.value = 'high';
						// if (opt_high.value == s_resolution)
						// opt_high.selected = "selected";
						// opt_high.innerHTML = 'High';
						// input_resolution.appendChild(opt_high);
						// }
						// appendWithLabel(panel, 'Resolution', input_resolution);
						// panel.appendChild(document.createTextNode('\u00A0\u00A0'));

						var input_font_color = document.createElement('input');
						input_font_color.type = 'text';
						input_font_color.id = 'font_color';
						input_font_color.className = 'spectrum';
						input_font_color.onchange = function() {
							effect.setup({
								fontColor : input_font_color.value
							});
						};
						input_font_color.value = tinycolor(s_font_color).toRgbString();
						appendWithLabel(panel, 'Font Color', input_font_color);
						panel.appendChild(document.createTextNode('\u00A0\u00A0\u00A0'));
						var input_bg_color = document.createElement('input');
						input_bg_color.type = 'text';
						input_bg_color.id = 'bg_color';
						input_bg_color.className = 'spectrum';
						input_bg_color.onchange = function() {
							effect.setup({
								bgColor : input_bg_color.value
							});
						};
						input_bg_color.value = tinycolor(s_bg_color).toRgbString();
						appendWithLabel(panel, 'Background Color', input_bg_color);
					}

					// Load CSS of Spectrum, and instantiate Spectrum.
					var link = document.createElement('link');
					link.href = '//contender-x-blogger.googlecode.com/git/js/spectrum/spectrum.css';
					link.rel = 'stylesheet';
					link.onload = function() {
						$('.spectrum').spectrum({
							showAlpha : true,
							showInput : true
						});
					};
					document.head.appendChild(link);

					function revAnim() {
						init();
						animate();
					}

					if (document.body == undefined) {
						// animation should wait until...
						PLAYGROUND.addEvent(window, 'load', function() {
							revAnim();
						});
					} else {
						// animation now
						revAnim();
					}

					function calcWidthHeight() {
						anim_w_percent = 0.6;
						anim_h_percent = 0.8;
						var oldWidth = container.offsetWidth, oldHeight = window.innerHeight;

						// width = window.innerWidth * anim_w_percent || 2;
						// height = window.innerHeight * anim_h_percent || 2;
						width = container.offsetWidth * anim_w_percent || 2;
						// height = container.innerHeight * anim_h_percent || 2;
						height = Math.max(Math.min(400, window.innerHeight * anim_h_percent), 2);

						// should container be resized?
						return oldWidth != width || oldHeight != height;
					}

					function init() {
						container = document.getElementById('placeholder-404');

						if (calcWidthHeight()) {
							container.style.height = height + 'px';
						}

						// A click trap against #placeholder-404 (#placeholder-404
						// element must have a 'style.position' value other than
						// 'static' for this click trap to work)
						var clicktrap = document.createElement('div');
						clicktrap.className = 'clicktrap';
						container.appendChild(clicktrap);

						var info = document.createElement('div');
						info.className = 'info';
						info.innerHTML = '<h1>DAFUQ?!</h1><p><a href=\'/\'>Home</a></p>';
						var info_block = document.createElement('div');
						info_block.className = 'center-hack';
						info_block.appendChild(info);
						container.appendChild(info_block);

						// Prepare a camera, defining viewport and metrics
						camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
						camera.position.y = 150;
						camera.position.z = 600;

						scene = new THREE.Scene();

						// Instanciate 2 lights
						var light = new THREE.PointLight(0xffffff);
						light.position.set(500, 500, 500);
						scene.add(light);
						light = new THREE.PointLight(0xffffff, 0.25);
						light.position.set(-500, -500, -500);
						scene.add(light);

						// A sphere
						sphere_r = 200;
						sphere = new THREE.Mesh(new THREE.SphereGeometry(sphere_r, 20, 10), new THREE.MeshLambertMaterial({
							shading : THREE.FlatShading
						}));
						scene.add(sphere);

						// A plane
						plane = new THREE.Mesh(new THREE.PlaneGeometry(5 * sphere_r, 2 * sphere_r), new THREE.MeshBasicMaterial({
							color : 0xe0e0e0
						}));
						plane.position.y = -sphere_r;
						plane.rotation.x = -Math.PI / 2;
						scene.add(plane);

						// Create a canvas element where the scene are rendered.
						if (Detector.webgl) {
							renderer = new THREE.WebGLRenderer({
								antialias : true, // to get smoother output
								preserveDrawingBuffer : true // to allow screenshot
							});
							renderer.setClearColor(0x000000, 0);
						} else {
							renderer = new THREE.CanvasRenderer();
						}
						// renderer.setSize(width, height);
						// renderer.domElement.className = 'anim';
						// var render_block = document.createElement('div');
						// render_block.className = 'center-hack';
						// render_block.appendChild(renderer.domElement);
						// container.appendChild(render_block);

						effect = new THREE.AsciiEffect(container, renderer, ascii_bright_pattern, {
							color : b_color,
							alpha : b_alpha,
							block : b_block,
							invert : b_invert,
							scale : i_scale,
							strResolution : s_resolution,
							renderStyle : s_render_style,
							fontColor : s_font_color,
							bgColor : s_bg_color
						});
						effect.setSize(width, height);
						effect.domElement.className = 'anim';
						var effect_block = document.createElement('div');
						effect_block.className = 'center-hack';
						effect_block.appendChild(effect.domElement);
						container.appendChild(effect_block);

						// Rendering infomation
						stats = new Stats();
						stats.domElement.style.position = 'absolute';
						stats.domElement.style.top = '0px';
						container.appendChild(stats.domElement);

						PLAYGROUND.addEvent(window, 'resize', onWindowResize);

					}

					function onWindowResize() {
						if (calcWidthHeight()) {
							container.style.height = height + 'px';

							camera.aspect = width / height;
							camera.updateProjectionMatrix();

							// renderer.setSize(width, height);
							effect.setSize(width, height);
						}
					}

					function animate() {
						requestAnimationFrame(animate);
						render();
						stats.update();
					}

					function render() {
						var timer = Date.now() - start;

						sphere.position.y = Math.abs(Math.sin(timer * 0.002)) * 300;
						sphere.rotation.x = timer * 0.0003;
						sphere.rotation.z = timer * 0.0002;

						// renderer.render(scene, camera);
						effect.render(scene, camera);
					}

				};
			};
			// ]] -->
		</script>
		<!-- My Contents END -->
	</body>
</html>